<style scoped lang="less">

</style>
<template>
  <div>

    <div class="item-wrap">
      <div class="tabbar-item" v-for="(item,index) in list">
        <div>{{item.title}}</div>
      </div>
      <div class="item-add"><span id="btn">添加</span></div>
    </div>
    <Button type="primary" @click="post" :loading="loading">保存</Button>
    <Modal v-model="show">
      <div v-if="temp!=null">
        <Form ref="customerServiceForm" :rules="csRuleValidate" :model="temp" :label-width="140">
          <FormItem label="名称" prop="title">
            <Input v-model="temp.title" style="width:260px"
                   placeholder="请输入菜单名"></Input>
          </FormItem>
          <FormItem label="排序" prop="sort">
            <InputNumber v-model="temp.sort" style="width:260px"
                         placeholder="值越小越靠前" :min="0"></InputNumber>
          </FormItem>
          <FormItem label="选中图" prop="active_img">
            <SelectImg v-model="temp.active_img"
                       :limit="1"
                       :initList="temp.active_img"></SelectImg>
          </FormItem>
          <FormItem label="转让图" prop="normal_img">
            <SelectImg v-model="temp.normal_img"
                       :limit="1"
                       :initList="temp.normal_img"></SelectImg>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit">确定</Button>
      </div>
    </Modal>
  </div>


</template>
<script>
  import {editTabbar, getTabbar} from '@/api/tenant-config';
  import SelectImg from '../../components/select-img';

  export default {
    name: 'customer-service',
    components: {
      SelectImg
    },
    data() {
      return {
        list: [],
        editIndex: -1,
        temp: {
          title: '',
          sort: 0,
          active_img: [],
          normal_img: []
        },
        show: false,
        loading: false,
        csRuleValidate: {
          title: [
            {required: true, message: '请输入菜单名', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  callback('请输入菜单名');
                } else {
                  callback();
                }
              }
            }
          ],
          sort: [
            {required: true, message: '排序不能为空', trigger: 'blur'}
          ],
          active_img: [
            {required: true, type: 'array', message: '请选择图片', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  callback('请选择图片');
                } else if (value.length === 0 || value[0] === '') {
                  callback('请选择图片');
                } else {
                  callback();
                }
              }
            }
          ], normal_img: [
            {required: true, type: 'array', message: '请选择图片', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  callback('请选择图片');
                } else if (value.length === 0 || value[0] === '') {
                  callback('请选择图片');
                } else {
                  callback();
                }
              }
            }
          ]
        }
      };
    },
    created() {
      this.getData();
    },
    methods: {
      cancel() {
        this.show = false;
      },
      submit() {
        if (this.editIndex !== -1) {
          this.list[this.temp.editIndex] = this.temp;
        } else {
          this.list.push(this.temp);
        }
      },
      getData() {
        let vm = this;
        getTabbar().then(rep => {
          if (rep.data.data.customer_service_qrcode != null) {
            rep.data.data.customer_service_qrcode = JSON.parse(rep.data.data.customer_service_qrcode);
          }
          vm.configData = rep.data.data;
        })
      },
      post() {
        this.loading = true;
        let vm = this;
        this.$refs['customerServiceForm'].validate((valid) => {
          if (valid) {
            editTabbar({
              tabbar_data: vm.list,
            }).then(rep => {
              this.loading = false;
              vm.$Message.success('修改成功');
            }, error => {
              this.loading = false;
            })
          }
        })
      }
    }
  }
</script>